<%-- 
    Document   : header
    Created on : Dec 19, 2011, 12:20:37 AM
    Author     : Hiru
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Pink Shop Template</title>
        <meta name="keywords" content="pink shop, store template, ecommerce, online shopping, CSS, HTML" />
        <meta name="description" content="Pink Shop is a free ecommerce template provided by templatemo.com" />
        <link href="templatemo_style.css" rel="stylesheet" type="text/css" />
        <link href="templatemo_style_mine.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />

        <script language="javascript" type="text/javascript">
            function clearText(field)
            {
                if (field.defaultValue == field.value) field.value = '';
                else if (field.value == '') field.value = field.defaultValue;
            }
        </script>
        <script language="javascript" type="text/javascript" src="scripts/mootools-1.2.1-core.js"></script>
        <script language="javascript" type="text/javascript" src="scripts/mootools-1.2-more.js"></script>
        <script language="javascript" type="text/javascript" src="scripts/slideitmoo-1.1.js"></script>
        <script language="javascript" type="text/javascript">
            window.addEvents({
                'domready': function(){
                    /* thumbnails example , div containers */
                    new SlideItMoo({
                        overallContainer: 'SlideItMoo_outer',
                        elementScrolled: 'SlideItMoo_inner',
                        thumbsContainer: 'SlideItMoo_items',		
                        itemsVisible: 5,
                        elemsSlide: 3,
                        duration: 200,
                        itemsSelector: '.SlideItMoo_element',
                        itemWidth: 140,
                        showControls:1});
                }
		
            });
        </script>
    </head>
    <body>
        <div id="templatemo_wrapper">
            <div id="templatemo_menu">
                <ul>
                    <li><a href="index.jsp" class="current"><span>Home</span></a></li>
                    <li><a href="#" target="_parent"><span>Buy</span></a></li>
                    <li><a href="add.jsp" target="_parent"><span>Sell</span></a></li>
                    <li><a href="#" target="_parent"><span>Rent</span></a></li>
                    <li><a href="#"><span>Contact</span></a></li>
                </ul>    	
            </div> <!-- end of templatemo_menu -->

            <div id="templatemo_header_bar">

                <div id="header"><div class="right"></div>

                    <h1><a href="#" target="_parent">
                            <img src="images/templatemo_logo.png" alt="Site Title" />
                            <span>Online Store Template</span>
                        </a></h1>
                </div>

                <div id="search_box">
                    <form action="Search" method="Get">
                        <input type="text" value="Enter keyword here..." name="item" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                        <input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
                    </form>
                </div>

            </div> <!-- end of templatemo_header_bar -->

            <div class="cleaner"></div>

            <div id="sidebar"><div class="sidebar_top"></div><div class="sidebar_bottom"></div>

                <div class="sidebar_section">

                    <h2>Members</h2>

                    <form action="#" method="post">
                        <label>Username</label>
                        <input type="text" value="" name="username" size="10" class="input_field" title="username" />
                        <label>Password</label>
                        <input type="password" value="" name="password" class="input_field" title="password" />
                        <a href="#">Register</a> 
                        <input type="submit" name="login" value="Login" alt="Login" id="submit_btn" title="Login" />
                    </form>

                    <div class="cleaner"></div>

                </div>

                <div class="sidebar_section">

                    <h2>Categories</h2>

                    <ul class="categories_list">
                        <li><a href="Search?cat=electronic_devices">Electronic Devices</a></li>
                        <li><a href="Search?cat=computer_and_accessories">Computer and Accessories</a></li>
                        <li><a href="Search?cat=mobile_phones">Mobile Phones</a></li>
                        <li><a href="Search?cat=electronic_devices">Cloths</a></li>
                        <li><a href="Search?cat=electronic_devices">Shoes</a></li>
                        <li><a href="Search?cat=electronic_devices">Furniture</a></li>
                    </ul>
                </div>

                <div class="sidebar_section">

                    <h2>Discounts</h2>

                    <div class="image_wrapper"><a href="#" target="_parent"><img src="images/image_01.jpg" alt="product" /></a></div>            
                    <div class="discount"><span>25% off</span> | <a href="#">Read more</a></div>

                </div>  

            </div> <!-- end of sidebar -->

            <div id="templatmeo_content">

                <div id="latest_product_gallery">

                    <h2>Featured Products</h2>

                    <div id="SlideItMoo_outer">	
                        <div id="SlideItMoo_inner">			
                            <div id="SlideItMoo_items">
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_01.png" alt="product 1" /></a>

                                </div>	
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_02.png" alt="product 2" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_03.png" alt="product 3" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_04.png" alt="product 4" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_05.png" alt="product 5" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_06.png" alt="product 6" /></a>

                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_07.png" alt="product 7" /></a>
                                </div>
                                <div class="SlideItMoo_element">
                                    <a href="#">
                                        <img src="images/templatemo_product_08.png" alt="product 8" /></a>
                                </div>
                            </div>			
                        </div>
                    </div>

                </div> <!-- end of latest_content_gallery -->